<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades">生产调度</i>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">

                <el-date-picker v-model="query.produceDate" type="date" placeholder="生产日期"  class="handle-input mr10" ></el-date-picker>

                <el-select v-model="query.productLine" value-key="id" class="handle-input mr10" >
                    <el-option
                            v-for="item in productLine"
                            :key="item.id"
                            :label="item.lineName"
                            :value="item">
                    </el-option>
                </el-select>

                <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>

            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    id="out-table"
                    header-cell-class-name="table-header"
            >

                <el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
                <el-table-column prop="produceDate" align="center" label="生产日期" ></el-table-column>
                <el-table-column prop="productLine.lineName" align="center" label="产线" ></el-table-column>

                <el-table-column
                        v-for="(item, index) in productList"
                        :key="index"
                        :label="item.productModel"
                        align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.productsNum[item.productModel]}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="calculation(scope.row)"
                                :style="{ display:buttonCal }"
                        >计算</el-button>
                        <el-tag type="warning" :style="{ display:waitCal }">计算中...</el-tag>
                        <el-tag type="success" :style="{ display:successCal }">已计算</el-tag>
                    </template>
                </el-table-column>

            </el-table>

            <div class="container" v-loading="loading">
                <el-steps  simple class="step" :active="8" finish-status=" process" v-for="row in 4">
                    <el-step :title="schedule['product'+((row-1)*8+item)]" icon="el-icon-star-off"  v-for="item in 8"></el-step>
                </el-steps>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "scheduling",
        data(){
            return{
                query: {
                    productLine:{},
                    produceDate:'',
                },
                productLine:[],
                productList:[],
                tableData: [],
                loading: false,
                waitCal:'none',
                successCal:'',
                buttonCal:'none',
                schedule:{
                    product1:'',product2:'',product3:'',product4:'',product5:'',product6:'',product7:'',product8:'',
                    product9:'',product10:'',product11:'',product12:'',product13:'',product14:'',product15:'',product16:'',
                    product17:'',product18:'',product19:'',product20:'',product21:'',product22:'',product23:'',product24:'',
                    product25:'',product26:'',product27:'',product28:'',product29:'',product30:'',product31:'',product32:'',
                }
            }
        },
        created() {
            this.getProduceDate();
            this.getProduct();


        },
        methods: {
            calculation(row){
                this.$axios.post('/api/plan/calculation',row).then(res => {
                    if (res.data.code !== '200') {
                        this.$message.error(res.data.message);
                    } else {
                        this.loading=true;
                        //将状态设置为正在计算状态
                        this.successCal='none';
                        this.waitCal='';
                        this.buttonCal='none';
                        this.$message.warning(res.data.message);
                    }

                })
            },
            getProduceDate(){
                var now = new Date();
                this.query.produceDate = now;
            },
            //查询产线下拉列表
            getProductLine() {
                this.$axios.get('/api/productLine/selectAll').then(res => {
                    if (res.data.code !== '200') {
                        this.$message.error(res.data.message);
                    } else {
                        this.productLine = res.data.data;
                        this.query.productLine = res.data.data[0];
                        this.getData();
                    }

                })
            },

            //获取产品
            getProduct() {
                this.$axios.get('/api/product/selectAll').then((res) => {
                    if (res.data.code !== "200") {
                        this.$message.error(res.data.message);
                    } else {
                        this.productList = res.data.data;
                        this.getProductLine();
                    }
                })
            },
            //获取当日生产任务
            getData() {
                if (JSON.stringify(this.query.productLine)==='{}'){
                    this.$message.warning("请选择生产产线");
                }else if(this.query.produceDate===''){
                    this.$message.warning("请选择生产日期");
                }else {

                    //加载当日生产任务
                    this.$axios({
                        method:"post",
                        url:"/api/plan/searchOnePlan",
                        data:{
                            productLine:this.query.productLine,
                            produceDate:this.query.produceDate
                        }
                    }).then(res =>{
                        if (res.data.code==='200') {
                            this.tableData=res.data.data;
                            this.getSchedule();
                        }else if(res.data.code==='504'){
                            this.loading=true;
                            this.tableData=res.data.data;
                            this.$message.warning(res.data.message)
                        }else {
                            this.loading=true;
                            this.$message.error(res.data.message)
                        }
                    });
                }
            },
            getSchedule(){
                //加载生产顺序
                this.$axios({
                    method:"post",
                    url:"/api/plan/scheduling",
                    data:{
                        productLine:this.query.productLine,
                        produceDate:this.query.produceDate
                    }
                }).then(res =>{
                    if (res.data.code==='200') {
                        this.schedule=res.data.data;
                        this.loading=false;
                        //将状态设置为已计算状态
                        this.successCal='';
                        this.waitCal='none';
                        this.buttonCal='none';

                    }else if(res.data.code==='504'){
                        this.$message.warning(res.data.message);
                        this.loading=true;
                        //将状态设置为 点击计算
                        this.successCal='none';
                        this.waitCal='none';
                        this.buttonCal='';
                    }else if(res.data.code==='505'){
                        this.loading=true;
                        //将状态设置为正在计算状态
                        this.successCal='none';
                        this.waitCal='';
                        this.buttonCal='none';
                        this.$message.warning(res.data.message)
                    }
                    else {
                        this.$message.error(res.data.message);
                        this.loading=true;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .mr10 {
        margin-right: 10px;
    }
    .step{
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }

</style>